<template>
  <ContentWrap>
      <!-- 搜索工作栏 -->
      <el-form
        class="-mb-15px"
        :model="queryParams"
        ref="queryFormRef"
        :inline="true"
        label-width="68px"
      >
        <el-form-item label="订单编号" prop="orderCode">
          <el-input style="display:none" />
          <el-input
            v-model="queryParams.orderCode"
            placeholder="请输入订单编号"
            clearable
            class="!w-240px"
            @keyup.enter="getExcode"
          />
        </el-form-item>
        <!-- <el-form-item label="出库单号" prop="exCode">
          <el-input
            v-model="queryParams.exCode"
            placeholder="请输入出库单号"
            clearable
            class="!w-240px"
            @keyup.enter="handleQuery"
          />
        </el-form-item> -->
        <el-form-item label="出库单号" prop="exCode">
            <el-select
              v-model="queryParams.exCode"
              placeholder="请选择"
              clearable
              class="!w-240px"
               @change="handleChange"
            >
              <el-option
                v-for="dict in excodeList"
                :key="dict"
                :label="dict"
                :value="dict"
              />
            </el-select>
          </el-form-item>
        <el-form-item>
          <el-button @click="handleQuery" :disabled="isDisabled"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
          <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
          <!-- <el-button
            type="success"
            plain
            @click="handleExport"
            :loading="exportLoading"
            v-hasPermi="['system:post:export']"
          >
            <Icon icon="ep:download" class="mr-5px" /> 导出
          </el-button>
          <el-button
            type="primary"
            plain
            @click="handleOutbound"
            :loading="exportLoading"
            v-show="outboundFlag"
            v-hasPermi="['system:post:export']"
          >
            出库
          </el-button> -->
          <!-- <el-button
            type="primary"
            plain
            @click="openForm5"
            :loading="exportLoading"

            v-hasPermi="['system:post:export']"
          >
            挂单
          </el-button> -->
        </el-form-item>
      </el-form>
    </ContentWrap>
  <!-- 列表 -->
  <ContentWrap>
      <el-table v-loading="loading" :data="list" class="cen">
        <el-table-column type="index" label="序号" fixed="left" align="center" width="55" />
        <el-table-column label="订单编号" align="center" prop="orderCode" fixed="left" />
        <el-table-column label="型号" align="center" prop="type" fixed="left" />
        <el-table-column label="织板编码" align="center" prop="code" fixed="left" />
        <el-table-column label="织板规格" align="center" prop="specification" fixed="left" />
        <el-table-column label="操作" align="center" width="60" fixed="left">
            <template #default="scope">
              <div class="flex items-center justify-center">
                <!-- <el-button
                  type="primary"
                  link
                  v-if = "scope.row.materialStatus === '0'"
                  @click="openForm(scope.row)"
                >修改
                </el-button> -->
                <el-button
                  type="primary"
                  link
                  @click="openForm2(scope.row)"
                >修改
                </el-button>
                <!-- <el-button
                  type="primary"
                  link
                  v-if = "scope.row.materialStatus === '1'"
                  @click="handleReject(scope.row)"
                >驳回
                </el-button> -->
              </div>
            </template>
          </el-table-column>

        <el-table-column label="球拍型号" align="center" prop="racketModel">
          <!-- <template #default="scope">
        <el-tag
          :type="scope.row.tag ='success'"
          disable-transitions
          >{{ scope.row.specification }}</el-tag
        >
      </template> -->
    </el-table-column>
        <el-table-column label="张数" align="center" prop="sheetNum" />
        <el-table-column label="轻重" align="center" prop="weight" />
        <el-table-column label="裁剪尺寸" align="center" prop="cutSize" />
        <el-table-column label="刀数" align="center" prop="knivesNum" />
        <el-table-column label="数量" align="center" prop="amount" />
        <el-table-column label="裁剪理料" align="center" prop="materialsCut" />
        <el-table-column label="画线加层" align="center" prop="addLayers" />

        <el-table-column label="备料复核" align="center" prop="materialCheck" />
        <el-table-column label="发料" align="center" prop="issuMaterials" />
        <el-table-column label="备注" align="center" prop="remark" />

        
      </el-table>
      <!-- 分页 -->
      <Pagination
        :total="total"
        v-model:page="queryParams.pageNo"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </ContentWrap>
    <!-- 修改对话框 -->
    <!-- <materialPickForm ref="formRef" @success="getList" /> -->
    <!-- 审核对话框 -->
    <materialPickCheckForm ref="formRefCheck" @success="getList"/>
    <!-- 挂单对话框 -->
    <!-- <materialPickHang ref="formRefHang" @success="getList" /> -->
  </template>
  
  <style>
    .el-table .warning-row {
      --el-table-tr-bg-color: var(--el-color-warning-light-9)!important;
    }
    .el-table .success-row {
      background-color: var(--el-color-success-light-9)!important;
    }
  </style>

  <script lang="ts" setup>
  import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
  import download from '@/utils/download'
  import * as materialPickOutApi from '@/api/hcxly/materialPickOutBound/Index'
  import materialPickCheckForm from './materialPickCheckForm.vue'
  
  defineOptions({ name: 'materialPickOutBound' })
  
  const message = useMessage() // 消息弹窗
  const { t } = useI18n() // 国际化
  
  const loading = ref(false) // 列表的加载中
  const total = ref(0) // 列表的总页数
  const list = ref([]) // 列表的数据
  const excodeList = ref([]) // 出库单数据
  // const outboundFlag = ref(false)
  const isDisabled = ref(true)

  const queryParams = reactive({
    pageNo: 1,
    pageSize: 10,
    orderCode: '',
    exCode: ''
  })
  const queryFormRef = ref() // 搜索的表单
  const materialStatusArry = ref([])

  /** 查询出库单 */
  const getExcode = async () => {
    excodeList.value = []
    excodeList.value = await materialPickOutApi.getmaterialPickExcode(queryParams.orderCode)
    // queryParams.exCode = excodeList.value[0]
  }

  /***出库单有值时，搜索按钮可点击**/
  const handleChange = async (val) => {
    if(val){
      isDisabled.value = false
    }else{
      isDisabled.value = true
    }
  }
  
  /** 查询列表 */
  const getList = async () => {
    loading.value = true
    try {
      const data = await materialPickOutApi.getmaterialPick(queryParams)
      list.value = data.list
      total.value = data.total
    } finally {
      loading.value = false
    }
  }
  
  /** 搜索按钮操作 */
  const handleQuery = () => {
    queryParams.pageNo = 1
    getList()
  }
  
  /** 重置按钮操作 */
  const resetQuery = () => {
    isDisabled.value = true
    queryFormRef.value.resetFields()
    handleQuery()
  }

  /** 修改操作 */
  const formRefCheck = ref()
  const openForm2 = (row) => {
    console.log(row)
    formRefCheck.value.open(row)
  }

  /** 初始化 **/
  // onMounted(() => {
    // getList()
  // })
  
  </script>
  